<template>
  <!-- 学者与机构合作关系图 -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Ecolors from "@/utils/chartColors";
import { resize, spaceTxt } from "@/utils/utils";
import * as echarts from "echarts";

export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String,
    },
    chartData: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
      graphType: "bar",
      colors: [],
      xData: [],
      yData: [],
      legendData: [],
      colorbar: null,
    };
  },
  computed: {
    ...mapState(["curChartConfig"]),
  },
  watch: {
    curChartConfig: {
      deep: true,
      handler: function () {
        this.getCurChartConfig();
      },
    },
    chartData: {
      deep: true,
      handler: function () {
        if (Object.keys(this.chartData).length <= 0) {
          if (this.chart) this.chart.clear();
        } else {
          this.getCurChartConfig();
        }
      },
    },
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.chartId));
    this.$emit("domRef", document.getElementById(this.chartId))
    this.getCurChartConfig();
  },
  methods: {
    getCurChartConfig() {
      if (Object.keys(this.curChartConfig).length > 0) {
        let graphType = this.curChartConfig.graphType;
        this.graphType = graphType;
      }
      if (Object.keys(this.chartData).length > 0) {
        this.init();
      }
    },
    getSeriesData() {
      let seriesData = {
        nodes: [],
        links: [],
        categories: [],
      };
      if (this.chartData.keyValues.nodes) {
        this.chartData.chartData.map((item) => {
          let source = item.term.split("/")[0];
          let target = item.term.split("/")[1];
          seriesData.links.push({
            source: source,
            target: target,
          });
          let index = this.chartData.keyValues.nodes.findIndex(
            (t) => t.expert_id == item.term.split("/")[0]
          );
          this.chartData.keyValues.nodes[index]["count"] = item.count;
        });
        this.chartData.keyValues.nodes.map((item, index) => {
          seriesData.categories.push({
            name: Math.floor(Math.random() * 10) + 1,
          });
          seriesData.nodes.push({
            category: Math.floor(Math.random() * 10) + 1,
            id: item.expert_id,
            name: item.name_zh || item.name,
            symbolSize: item.count,
            value: item.count,
          });
        });
      } else {
        this.chartData.chartData.map((item) => {
          let source = item.term.split("/")[0];
          let target = item.term.split("/")[1];
          seriesData.links.push({
            source: source,
            target: target,
          });
          for (let key in this.chartData.keyValues) {
            if (key == item.term.split("/")[0]) {
              this.chartData.keyValues[key]["count"] = item.count;
            }
          }
        });
        for (let key in this.chartData.keyValues) {
          seriesData.categories.push({
            name: Math.floor(Math.random() * 10) + 1,
          });
          seriesData.nodes.push({
            category: Math.floor(Math.random() * 10) + 1,
            id: key,
            name:
              this.chartData.keyValues[key].name_zh ||
              this.chartData.keyValues[key].name,
            symbolSize: this.chartData.keyValues[key].count ,
            value: this.chartData.keyValues[key].count ,
          });
        }
      }
      return seriesData;
    },
    init() {
      let seriesData = this.getSeriesData();
      if (!seriesData) {
        return;
      }
      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', "#9E87FF", "#fe9a8b"];
      const symbolBuilding = 'path://M1000.704 907.648h-46.528V349.12c0-51.2-41.856-93.12-93.056-93.12H674.88v651.648h-46.528V116.352c0-51.2-41.856-93.056-93.056-93.056H162.88c-51.2 0-93.056 41.856-93.056 93.056v791.296H23.296C9.28 907.648 0 916.928 0 930.88v46.592c0 13.952 9.28 23.232 23.296 23.232h977.408c14.016 0 23.296-9.28 23.296-23.232V930.88c0-13.952-9.28-23.232-23.296-23.232zM302.528 698.176c0 13.952-9.28 23.296-23.232 23.296h-93.12c-13.952 0-23.296-9.344-23.296-23.296v-46.528c0-13.952 9.344-23.296 23.296-23.296h93.12c13.952 0 23.232 9.344 23.232 23.296v46.528z m0-186.176c0 13.952-9.28 23.296-23.232 23.296h-93.12c-13.952 0-23.296-9.344-23.296-23.296v-46.528c0-13.952 9.344-23.296 23.296-23.296h93.12c13.952 0 23.232 9.344 23.232 23.296V512z m0-186.24c0 14.08-9.28 23.36-23.232 23.36h-93.12c-13.952 0-23.296-9.344-23.296-23.296v-46.528c0-14.016 9.344-23.296 23.296-23.296h93.12c13.952 0 23.232 9.28 23.232 23.296v46.528z m232.768 372.48c0 13.888-9.344 23.232-23.296 23.232h-93.12c-13.952 0-23.232-9.344-23.232-23.296v-46.528c0-13.952 9.28-23.296 23.232-23.296H512c13.952 0 23.296 9.344 23.296 23.296v46.528z m0-186.24c0 13.952-9.344 23.296-23.296 23.296h-93.12c-13.952 0-23.232-9.344-23.232-23.296v-46.528c0-13.952 9.28-23.296 23.232-23.296H512c13.952 0 23.296 9.344 23.296 23.296V512z m0-186.24c0 14.08-9.344 23.36-23.296 23.36h-93.12c-13.952 0-23.232-9.344-23.232-23.296v-46.528c0-14.016 9.28-23.296 23.232-23.296H512c13.952 0 23.296 9.28 23.296 23.296v46.528z m349.056 372.48c0 13.888-9.28 23.232-23.232 23.232H768c-13.952 0-23.296-9.344-23.296-23.296v-46.528c0-13.952 9.344-23.296 23.296-23.296h93.12c13.952 0 23.232 9.344 23.232 23.296v46.528z m0-186.24c0 13.952-9.28 23.296-23.232 23.296H768c-13.952 0-23.296-9.344-23.296-23.296v-46.528c0-13.952 9.344-23.296 23.296-23.296h93.12c13.952 0 23.232 9.344 23.232 23.296V512z';
      const symbolPerson = 'path://M 329.124 432.216 c 29.3791 86.8541 87.4415 187.211 186.93 182.911 c 96.8703 -4.18532 153.046 -101.147 182.858 -186.948 c 43.3892 -12.5202 44.4657 -80.2917 12.1999 -105.673 c 30.2489 -310.35 -439.142 -294.887 -398.222 4.1096 c -39.4321 25.4558 -23.7039 93.041 16.2337 105.6 Z M 662.366 647.637 c -37.1869 60.3413 -62.3408 132.717 -101.6 190.985 c -6.60033 -39.4495 -9.65694 -82.4427 -16.2747 -121.932 c 2.86526 -5.61795 31.3971 -18.5147 12.2193 -20.2881 H 463.234 c 25.1938 18.2916 7.07207 104.129 -4.07276 146.293 c -32.49 -66.3778 -60.0415 -137.695 -101.583 -195.058 C 190.186 672.605 62.5424 737.322 60.9389 928.004 h 902.121 c -1.97805 -191.662 -130.359 -257.021 -300.694 -280.366 Z';
      let icon = this.chartData.keyValues.nodes ? symbolPerson : symbolBuilding;
      let option = {
        color: colors,
        backgroundColor: "#fff",
        series: [
          {
            name: "Les Miserables",
            type: "graph",
            layout: "force",
            data: seriesData.nodes,
            links: seriesData.links,
            focusNodeAdjacency: true,
            categories: seriesData.categories,
            roam: true,
            symbol: icon,
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
            },
            labelLayout: {
              hideOverlap: true,
            },
            scaleLimit: {
              min: 0.4,
              max: 2,
            },
            lineStyle: {
              curveness: 0.3,
            },
            force: {
              gravity: 0.5,
              repulsion: 200,
            },
          },
        ],
      };
      option && this.chart.setOption(option);
      this.$emit("chartDom", this.chart);
      // 后台报告下载
      this.chart.on("finished", () => {
        let tempId = this.$route.query.tempId;
        if (tempId) {
          this.getEchartImg(this.chart.getDataURL());
        }
      });
    },
    getEchartImg(base) {
      let dom = document.getElementById("echartImgFinished");
      if (dom) {
        document.getElementById("app").removeChild(dom);
      }
      window.echartImg = base;
      let _echartImg = document.createElement("div");
      _echartImg.setAttribute("id", "echartImgFinished");
      document.getElementById("app").appendChild(_echartImg);
    },
    // 保存对比分析数据
    getContrastiveData(option) {
      let arr = [];
      option.series[0].data.forEach((v, i) => {
        if (v.custom_selected === true) {
          arr.push(v);
        }
      });
      this.$emit("contrastiveData", arr);
    },
  },

  destroyed() {
    this.chart.dispose();
    this.chart = null;
  },
};
</script>

